import React from 'react';
import { connect } from 'dva';
import styles from './NetDisk.css';
import { Menu, Table, Pagination, Popconfirm, Button, Row, Col, Tree, Icon, Breadcrumb } from 'antd';
import { routerRedux } from 'dva/router';
import { PAGE_SIZE } from '../../constants';

function NetDisk({ dispatch, dataSource, currentDir }) {


  function enterDir(name) {
    dispatch({
      type: 'netdisk/list',
      payload: {path: name}
    })
  }

  function previewFile(name) {
    dispatch({
      type: 'netdisk/getContent',
      payload: {path: name}
    })
  }

  /*const dataSource = [{
    id: 1,
    name: 'aa',
    size: '4k',
    date: '2017-05-25 10:22',
    type: 'dir'
  }, {
    id: 2,
    name: 'dd.png',
    size: '8M',
    date: '2017-05-25 10:22',
    type: 'png'
  }]*/

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => <span onClick={record.type === 'dir' ? enterDir.bind(null, currentDir + record.name + '/') : previewFile.bind(null, currentDir + record.name)}>{text}</span>,
    },
    {
      title: 'Type',
      dataIndex: 'type',
      key: 'type',
      render: text => <a href="">{text}</a>,
    },
    {
      title: 'Size',
      dataIndex: 'size',
      key: 'size',
    },
    {
      title: 'Date',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: 'Operation',
      key: 'operation',
      render: (text, record) => (
        <span>
          operation
        </span>
      ),
    },
  ];

  return (
    <div className={styles.normal}>
      <Row className={styles.topBar}>
        <Col span={20}>
          <Breadcrumb>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            {currentDir.split('/').map(p => <Breadcrumb.Item>{p}</Breadcrumb.Item>)}
          </Breadcrumb>
        </Col>
        <Col span={4} className={styles.right}>
          <Icon type="bars" />
        </Col>
      </Row>
      <Row>
        <Col span={6}>
          <div className={styles.sideBar}>
          <Tree>
            <Tree.TreeNode key="dir1" title="dir1"  isLeaf={false}></Tree.TreeNode>
            <Tree.TreeNode key="dir2" title="dir2"  isLeaf={false}>
              <Tree.TreeNode key="dir21" title="dir21" isLeaf={false}></Tree.TreeNode>
              <Tree.TreeNode key="dir22" title="dir22"  isLeaf={false}></Tree.TreeNode>
            </Tree.TreeNode>
          </Tree>
          </div>
        </Col>
        <Col span={18}>
          <div>
            <Table
              columns={columns}
              dataSource={dataSource}
              loading={false}
              rowKey={record => record.id}
              pagination={false}
            />
          </div>
        </Col>
      </Row>
    </div>
  );
}

function mapStateToProps(state) {
  const { list, tree, pwd } = state.netdisk;
  return {
    loading: state.loading.models.netdisk,
    dataSource: list,
    tree,
    currentDir: pwd
  };
}

export default connect(mapStateToProps)(NetDisk);
